<template>
    <div class="add-container">
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="商品分类" class="select-top" prop="product_category_id">
                <el-cascader v-model="productCateValue" :options="productCateOptions"></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="sub_title">
                <el-input v-model="form.sub_title"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌" prop="brand_id">
                <el-select v-model="form.brand_id" placeholder="请选择">
                    <el-option
                        v-for="item in brandOptions"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍" prop="description">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="图片链接" prop="pic">
                <el-input v-model="form.pic"></el-input>
            </el-form-item>
            <el-form-item label="商品货号" prop="product_sn">
                <el-input v-model="form.product_sn"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" prop="price">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价" prop="original_price">
                <el-input v-model="form.original_price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" prop="stock">
                <el-input v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item label="计量单位" prop="unit">
                <el-input v-model="form.unit"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="weight">
                <el-input v-model="form.weight"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addProduct, getBrandList, getCateGoryList } from "@/network/product/";

export default {
    data() {
        return {
            form: {
                brand_id: null, //商品品牌id
                brand_name: "", //商品品牌名称
                delete_status: 0, //删除标志位，默认填0，表示未删除
                description: "", //商品介绍
                name: "", //商品名称
                original_price: 0, //市场价
                pic: "", //商品图片的url地址
                price: 0, //商品售价
                product_category_id: null, //分类id
                product_category_name: "", //分类名称
                product_sn: "", //商品货号
                sort: 0, //排序
                stock: 0, //商品库存
                sub_title: "", //副标题
                unit: "", //计量单位
                weight: 0, //商品重量
                sale: 0, //商品销量
                publish_status: 0, //上架
                new_status: 0, //新品
                recommand_status: 0, //推荐
                verify_status: 0, //审核状态
            },
            productCateOptions: [], //分类的options数组
            productCateValue: null, //选中的分类
            brandOptions: [], //商品品牌列表
            rules: {
                product_category_id: [{ required: true, message: "请选择分类", trigger: "blur" }],
                name: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                    {
                        min: 3,
                        max: 100,
                        message: "长度在3-100个字符之间",
                        trigger: "blur",
                    },
                ],
                sub_title: [{ required: true, message: "请输入副标题名称", trigger: "blur" }],
                brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
                description: [{ required: true, message: "请输入商品介绍", trigger: "blur" }],
                pic: [{ required: true, message: "请输入图片链接地址", trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                // 验证通过
                if (valid) {
                    console.log(111);
                    this.brandOptions.forEach((i) => {
                        if (i.id == this.form.brand_id) {
                            this.form.brand_name = i.name;
                        }
                    });
                    this.productCateOptions.forEach((i) => {
                        i.children.forEach((j) => {
                            if (j.value == this.form.product_category_id) {
                                this.form.product_category_name = j.label;
                            }
                        });
                    });
                    const res = await addProduct(this.form);
                    if (res.status == 200) {
                        this.$message({
                            message: "商品添加成功",
                            type: "success",
                        });
                        this.$router.push("/pms/product");
                    } else {
                        // 验证没通过
                        console.log("失败数据：", res);
                        this.$message.error("商品添加失败");
                        return false;
                    }
                }
            });
        },
        async category() {
            const { data } = await getCateGoryList();
            data.forEach((i) => {
                let children = []; //放子节点数据
                //重组子级节点数据
                i.children.forEach((j) => {
                    children.push({
                        label: j.name,
                        value: j.id,
                    });
                });
                this.productCateOptions.push({
                    label: i.name,
                    value: i.id,
                    children: children,
                });
            });
        },
        async BrandList() {
            const { data } = await getBrandList();
            this.brandOptions = data;
        },
    },
    watch: {
        productCateValue(newVal) {
            this.form.product_category_id = newVal[1];
        },
    },
    mounted() {
        this.category();
        this.BrandList();
    },
};
</script>

<style lang="scss" scoped>
.el-form {
    width: 620px;
}

.select-top {
    width: 200px;
}
</style>
